<template>
  <div v-if="btnShow" class="btn-group">
    <el-button v-for="btnItem in btnData" :key="btnItem.name" :type="btnItem.type" :disabled="btnItem.disabled" size="mini" @click="BtnClick(btnItem.name)"><font-awesome-icon :icon="btnItem.icon" fixed-width />{{ btnItem.name }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'ButtonGroup',
  props: {
    btnShow: {
      type: Boolean,
      default: true
    },
    btnData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    BtnClick(name) {
      this.$emit('BtnClick', name)
    }
  }
}
</script>

<style>
.btn-group {
  margin-top: 5px;
  margin-left: 20px;
}
</style>
